<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="../libs/css/animate.css">
    <style>

        .static{
            width:150px;
            height:150px;
            text-align: center;
            line-height: 150px;
        }
        .a{
            background: red;
        }
        .b{
            border:3px solid blue;
        }
        .c{
            border-radius: 50%;
        }
        .main{
            width:420px;
            overflow: hidden;
            padding: 20px 10px;
            box-sizing: border-box;
            background: #f4f4f4;
            border-radius: 10px;
            height:420px;
            display: flex;
            flex-direction: column;
        }
        .nav{
            width:100%;
            display: flex;
            justify-content: space-between;
        }
        .nav-item{
            width:120px;
            height:40px;
            background: brown;
            border-radius: 6px;
            color:#fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .nav .active{
            background: #0f0;
            color:crimson;
            font-size: 20px;
        }
        .content{
            flex:1;
            width:100%;
            margin-top:20px;
            overflow: hidden;
            position: relative;
        }
        .content-item{
            width:100%;
            height:100%;
            border-radius: 6px;
            background: darkmagenta;
            color:#fff;
            font-size: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
        }

        .zoom-enter-active{
            animation: zoomInDown 1s both;
        }

        .zoom-leave-active{
            animation: zoomOutDown 0.6s both;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 :data-title="msg">{{msg}}</h2>
        <div class="box" v-if="false">
            
            <div class="static a b c">Box</div>
            <div class="static" :class="'a'">1</div>
            <div class="static c" :class="flag?'a':'b'" @click="flag=!flag">2</div>
            <div class="static c" :class="myclass" >3 </div>
            <div class="static " :class="{a:isa,b:isb,c:false}">4</div>
            <div class="static c" :class="objclass">5</div>
            <div class="static" :class="['a','b']">6</div>
            <div class="static" :class="[classa,classb]">6</div>

            <div class="static c" style="font-size:50px;background: crimson;">7</div>
            <div class="static c" :style="{fontSize:'60px',background:bg}">8</div>
            <div class="static c" :style="style" >9</div>
        </div>
        <!-- 加切换动画 -->
        <div class="main">
            <div class="nav">
                <div class="nav-item " :class="current==0?'active':''" @click="changeCurrent(0)">
                    iphone13
                </div>     
                <div class="nav-item" :class="{active:current==1}" @click="changeCurrent(1)">
                    iphone12
                </div>     
                <div class="nav-item" :class="[current==2?'active':'']" @click="changeCurrent(2)">
                    iphone11
                </div>     
            </div>
            <div class="content">
                <transition-group name="zoom" mode="out-in" >
                    <div key="0" class="content-item" v-if="current==0">iphone13 真香</div>
                    <div key="1" class="content-item" v-if="current==1">iphone12 真垃圾</div>
                    <div key="2" class="content-item" v-if="current==2">iphone11 真不错</div>
                </transition-group> 

                <!-- <div key="0" class="content-item" :style="{display:current==0?'flex':'none'}">iphone13 真香</div>
                <div key="1" class="content-item" :style="{display:current==1?'flex':'none'}">iphone12 真垃圾</div>
                <div key="2" class="content-item" :style="{display:current==2?'flex':'none'}">iphone11 真不错</div> -->
            </div>
        </div>
    </div>
    <script>
        const vm = new Vue({
            data:{
                msg:"特殊的 属性绑定 style  && class",
                flag:true,
                myclass:"b",
                isa:true,
                isb:true,
                objclass:{
                    a:false,
                    b:true 
                },
                classa:'a',
                classb:'c',
                bg:"deeppink",
                style:{
                    fontSize:"80px",
                    background:"#f50",
                    border:"4px solid pink"
                },
                current:0
            },
            methods:{
                changeCurrent(index){
                    this.current = index;
                }
            },
            mounted(){
                document.querySelectorAll("title")[0].innerHTML = this.msg;
            }
        }).$mount("#app")
    </script>
    <!-- 
        动态的class 和  style 切换   
        v-bind 用于 class 和 style 时，Vue.js 做了专门的增强   除了字符串之外，还可以是对象或数组

        v-bind
        v-bind:class 
        :class = " "  {}  []
        v-bind:style 
        :style = {}  [{}]

        :style="{display:current==i?'block':'none'}
     -->
</body>
</html>